<%-- 
    Document   : AddTheLoai3
    Created on : Jun 16, 2013, 9:56:16 AM
    Author     : quannq
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<form:form commandName="theloai3" method="post" action="addtheloai3" id="validate">
    <table width="404" border="0" align="center">
        <tr>
            <td colspan="2" align="center"><h2>NHẬP THÔNG THỂ LOẠI</h2></td>
        </tr>
        <tr>
            <td><form:label path="theloai1">Tên Thể Loại 1</form:label></td>
            <td ><form:select path="theloai1" cssStyle="width:300px;" class="validate[required]" onchange="getTheLoai2(this.value)">
                    <form:option value="">select</form:option>
                    <c:forEach items="${theloai1}" var="tl1">
                        <form:option value="${tl1.matl1}">${tl1.tentl1}</form:option>
                    </c:forEach>
                </form:select></td>
        </tr>
        <tr>
            <td><form:label path="theloai2">Tên Thể Loại 2</form:label></td>
            <td ><form:select path="theloai2" id="tl2" cssStyle="width:300px;" class="validate[required]" >
                    <form:option value="">select</form:option>                    
                </form:select></td>
        </tr>

        <tr>
            <td><form:label path="tentl3">Tên Thể Loại</form:label></td>
            <td><form:input path="tentl3" cssStyle="width:300px;" class="validate[required]"></form:input></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <div id="comment-box">
                        <input type="submit" class="button-primary" value="Thêm"/>
                    </div>
                </td>
            </tr>
        </table>
</form:form>
<script type="text/javascript">
    function getTheLoai2(idtl1) {
        if (idtl1 !== "") {
            $.ajax({
                type: "get",
                url: "${pageContext.request.contextPath}/admin/theloai2_select/" + idtl1,
                success: function(response) {
                    $("#tl2").html("");
                    $("#tl2").html(response);
                },
                error: function() {
                    alert('Error while request..');
                }
            });
        }
        else {
            $("#tl2").html("<option value=''>select</option>");
        }
    }
</script>